<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.xjw-button {
  /* display: inline-flex; */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  outline: none;
  border: none;
  padding: 0;
  background: none;
  font-size: 28upx;
  border-radius: 0;
  position: relative;
  &.is-fix-height {
    height: 100%;
    max-height: 102upx;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }
  &::after {
    display: none;
  }
  &__default {
    border-radius: 8upx;
    padding: 24upx 32upx;
    color: #fff;
    @include global-type-color("background", true);
    &--grey {
      background: #f4f4f5;
      color: #909399;
    }
    &.is-disabled {
      background: $disabledColor;
    }
  }
  &__white {
    @extend .xjw-button__default;
    background: #fff;
    @include global-type-color("color", true);
    &--strong {
      color: $f303133;
    }
  }
  &__border {
    padding: 22upx 30upx;
    @include global-type-color("border-color", true);
    @include global-type-color("color", true);
    border-width: 2upx;
    border-radius: 8upx;
    border-style: solid;
    &.is-disabled {
      border-color: $disabledColor;
      color: $disabledColor;
    }
  }
  &__text {
    @include global-type-color("color", true);
    &--strong {
      color: $f303133;
    }
    &.is-disabled {
      color: $disabledColor;
    }
  }

  .xjw-ripple {
    z-index: 0;
    position: absolute;
    border-radius: 100%;
    background-clip: padding-box;
    pointer-events: none;
    user-select: none;
    transform: scale(0);
    opacity: 1;
    transform-origin: center;
  }
  .xjw-active {
    opacity: 0;
    transform: scale(2);
    transition: opacity 1s linear, transform 0.4s linear;
  }
}
</style>

<template>
  <button
    @tap.stop="click"
    class="xjw-button"
    :class="[buttonTextClass, isDisabledClass, { 'is-fix-height ': fixHeight }]"
    :style="userStyle"
    :loading="loading"
    :openType="openType"
    @getphonenumber="getphonenumber"
    @getuserinfo="getuserinfo"
  >
    <slot></slot>
    <view
      v-if="ripple"
      class="xjw-ripple"
      :class="[waveActive ? 'xjw-active' : '']"
      :style="{
        top: rippleTop + 'px',
        left: rippleLeft + 'px',
        width: fields.targetWidth + 'px',
        height: fields.targetWidth + 'px',
        'background-color': 'rgba(0, 0, 0, 0.15)',
      }"
    ></view>
  </button>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Ttype } from "../types/type";

export type TButtonType = "default" | "text" | "border" | "white";

// white 才有 strong 目前只有default有grey
export type TButtonColorType = Ttype | "base" | "strong" | "grey";

@Component
export default class Index extends Vue {
  @Prop({ type: String as PropType<TButtonType>, default: "default" }) type;
  @Prop({ type: String as PropType<TButtonColorType>, default: "primary" })
  color;
  @Prop({ type: Boolean, default: false }) disabled;
  @Prop({ type: Boolean, default: false }) loading;
  @Prop({ type: Boolean, default: false }) fixHeight;
  @Prop({ type: Boolean, default: true }) ripple;
  @Prop({ type: String, default: "" }) userColor;
  @Prop({ type: String, default: "" }) userFontSize;
  @Prop({ type: String, default: "" }) openType;
  @Prop({ type: String, default: "" }) userRadius;

  get userColorStyle() {
    if (this.userColor) {
      return `color:${this.userColor};`;
    }
    return "";
  }

  get buttonTextClass(): string {
    return `xjw-button__${this.type} xjw-button__${this.type}--${this.color}`;
  }

  get isDisabledClass(): string {
    if (this.disabled) {
      return "is-disabled";
    }
    return "";
  }

  get userFontSizeStyle() {
    if (this.userFontSize) {
      return `font-size:${this.userFontSize}`;
    }
    return "";
  }

  get userRadiusStyle() {
    if (this.userRadius) {
      return `border-radius:${this.userRadius}`;
    }
    return "";
  }

  get userStyle() {
    let style: string = "";
    if (this.userColorStyle) {
      style = this.userColorStyle;
    }
    if (this.userFontSize) {
      style = style + this.userFontSizeStyle;
    }
    if (this.userRadius) {
      style = style + this.userRadiusStyle;
    }
    return style;
  }

  rippleTop = 0; // 水波纹的起点Y坐标到按钮上边界的距离
  rippleLeft = 0; // 水波纹起点X坐标到按钮左边界的距离
  fields = {}; // 波纹按钮节点信息
  waveActive = false; // 激活水波纹

  click(e: TouchEvent) {
    if (!this.loading && !this.disabled) {
      this.$emit("click", e);
      // 是否开启水波纹效果  等添加了节流这里加需要加上防抖;
      if (this.ripple && this.type !== "text") {
        // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
        this.waveActive = false;
        this.$nextTick(function () {
          this.getWaveQuery(e);
        });
      }
    }
  }

  // 查询按钮的节点信息
  getWaveQuery(e) {
    this.getElQuery().then((res) => {
      const data = (res as any)[0];
      if (!data.width || !data.width) return;
      data.targetWidth = data.height > data.width ? data.height : data.width;
      if (!data.targetWidth) return;
      this.fields = data;
      const touchesX = e.touches[0].clientX;
      const touchesY = e.touches[0].clientY;
      this.rippleTop = touchesY - data.top - data.targetWidth / 2;
      this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
      this.$nextTick(() => {
        this.waveActive = true;
      });
    });
  }

  // 获取节点信息
  getElQuery() {
    return new Promise((resolve) => {
      let queryInfo: any = "";
      queryInfo = uni.createSelectorQuery().in(this);
      queryInfo.select(".xjw-button").boundingClientRect();
      queryInfo.exec((data) => {
        resolve(data);
      });
    });
  }

  getphonenumber(v) {
    this.$emit("getphonenumber", v);
  }
  getuserinfo(v) {
    this.$emit("getuserinfo", v);
  }
}
</script>
